<template>

        <view class="openshop">
                <view v-if="salonState == 1" class="openshop-wait">
                    <image src="/static/images/openshop-wait.png" />
                    <view class="text">您的店铺申请已提交，请耐心等待审核结果</view>
                </view>
                <form @submit="formSubmit" v-if="salonState == 'undefind' || salonState == 3">
                 <view class="title">个人信息(必填)</view>     
                <view class="group">
                        <view class="label">真实姓名</view>
                        <view class="input-item">
                            <input type="text"  placeholder-class="placeholder" placeholder="请输入真实姓名" class="input" name="customName" />
                        </view>
                </view>
                 <view class="group">
                        <view class="label">手机号码</view>
                        <view class="input-item">
                            <input type="number"
                                   :value="phone" 
                                   placeholder-class="placeholder" 
                                   placeholder="请输入手机号码" 
                                   class="input" 
                                   name="customPhone" />
                        </view>
                </view>
                 <!-- <view class="group">
                        <view class="label">身份证号</view>
                        <view class="input-item">
                            <input type="text"  
                                   placeholder-class="placeholder" 
                                   placeholder="请输入身份证号" 
                                   class="input" 
                                   name="customIdCard" />
                        </view>
                </view> -->
                <view class="title title-p">店铺信息(必填)</view> 
                 <view class="group">
                        <view class="label">店铺名称</view>
                        <view class="input-item">
                            <input type="text"  
                                   placeholder-class="placeholder" 
                                   placeholder="请输入店铺名称" 
                                   class="input" 
                                   name="shopName" />
                        </view>
                </view>
                <view class="group">
                        <view class="label">公司名称</view>
                        <view class="input-item">
                            <input type="text"  
                                   placeholder-class="placeholder" 
                                   placeholder="请输入公司名称" 
                                   class="input"  
                                   name="companyName" />
                        </view>
                </view>

                <view class="group">
                        <view class="label">经营类别</view>
                        <view class="input-picker">
                            <view class="picker-text" >{{category[cartegroyIdx].categoryName}}</view>    
                            <picker  :value="cartegroyIdx" 
                                     :range="category" 
                                     range-key="categoryName"
                                    @change="changeHandle">
                                    <view class="picker">
                                    
                                    
                                        <text>请选择经营类别</text>  
                                    </view>     
                            </picker>
                        </view>
                </view>

                <view class="group">
                    <view class="label">店铺区域</view>
                    <view class="input-item">
                          

                             <picker mode="region" 
                                     @change="bindRegionChange" 
                                     :value="region" 
                                     :custom-item="customItem">
                                <view :class="[city?'address-on':'address-off']">
                                 {{city || '选择店铺区域'}}
                            </view>
                            </picker>
                            <image src="/static/images/allow-left.png" class="allow-address">
                    </view>    
                </view>

                <view class="group">
                        <view class="label">店铺地址</view>
                        <view class="input-item">
                            <input type="text"  
                                   placeholder-class="placeholder" 
                                   placeholder="请输入店铺地址" 
                                   class="input" 
                                   name="customAddress" />
                        </view>
                </view>

                  <view class="group">
                        <view class="label">营业执照</view>
                        <view class="input-item">
                                <Certificate @setImag="getCertificate" />
                        </view>
                </view>

                  <view class="group">
                        <view class="label">门头照片</view>
                        <view class="input-item">
                                <ShopImag  cb="getShopImag" @setImag="getShopImag"/>
                        </view>
                </view>

                <view class="rule">
                    <checkbox-group name="argee">
                       <checkbox :checked="true"  value="1"/> 我同意并遵守<navigator class="link" url="/detailPackages/pages/agree/index?id=9" style="display:inline" hover-class="none">《未来商城店铺开通协议》</navigator>
                    </checkbox-group>   
                </view>

                <button class="submit" formType="submit" >提交申请</button>
              
                </form> 
        </view>
</template>
<script>

import UpImag from './_components/upimag'
import {postAddCustomOpenShop,postType} from '@/request/actions'


export default {
  
    events:{
      
    },
    data(){
        return{
            cartegroyIdx:'',
            category:[

            ],

            city:'',
            region: ['', '', ''],
            customItem: '全部',
            salonState:'undefind',
            categoryId:'',
            phone:'',
            businessImg:'',
            shopTopImages:''
        }
       
    },
     methods:{
         getCertificate(p){

             
            this.businessImg = p;
           
        },
        getShopImag(p){
            this.shopTopImages = p
            
        },
        changeHandle(e){
          
            this.cartegroyIdx = e.detail.value;
            this.categoryId = this.category[this.cartegroyIdx].id;
         
            
        },
        bindRegionChange(e){

            if(e.detail.value[0] !== '全部'){
                  this.city =  e.detail.value.join('');
            }
         
           
  
            
         
        },
        formSubmit(e){
            let globalData = getApp().globalData;    
            let { customName , customPhone  ,shopName ,companyName ,customAddress , argee} = e.detail.value;
            let cityName  = this.city
            let businessImg = this.businessImg;
            let shopTopImages = this.shopTopImages;
            let {userId} = globalData.userInfo;
            let categoryId = this.categoryId;
            

            customAddress = this.city + customAddress;
           
         
// if(!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(customIdCard)){
//                                    return uni.showToast({
//                                         title:"请输入正确的身份证号",
//                                         icon: 'none',
//                                         duration: 2000
//                                   })
//               }else
         
   
          
      
               if(customName.length == 0){
                   return uni.showToast({
                        title: '请输入真实姓名',
                        icon: 'none',
                        duration: 2000
                    })
               }else if(!/^1\d{10}$/.test(customPhone)){
                    return uni.showToast({
                        title: '请输入正确的手机号码',
                        icon: 'none',
                        duration: 2000
                    })
               }else  if(shopName.length == 0){
                      return uni.showToast({
                        title: '请输入店铺名称',
                        icon: 'none',
                        duration: 2000
                    })
              }else if(companyName.length == 0){
                      return uni.showToast({
                        title: '请输入公司名称',
                        icon: 'none',
                        duration: 2000
                    })
              }else if(categoryId.length == 0){
                      return uni.showToast({
                        title: '请选择经营类别',
                        icon: 'none',
                        duration: 2000
                    })
              }else if(!cityName ){
                      return uni.showToast({
                        title: '选择店铺区域',
                        icon: 'none',
                        duration: 2000
                    })
              }else if(customAddress.length == 0){
                      return uni.showToast({
                        title: '请输入店铺地址',
                        icon: 'none',
                        duration: 2000
                    })
              }else if(businessImg.length == 0){
                      return uni.showToast({
                        title: '请选择营业执照',
                        icon: 'none',
                        duration: 2000
                    })
              }else if(shopTopImages.length == 0){
                      return uni.showToast({
                        title: '请选择门头照片',
                        icon: 'none',
                        duration: 2000
                    })
              }else if(argee.length == 0){
                      return uni.showToast({
                        title: '请勾选未来商城店铺开通协议',
                        icon: 'none',
                        duration: 2000
                    })
              }

        
            postAddCustomOpenShop({
               categoryId,  userId,  customName , customPhone  ,shopName ,companyName ,customAddress,businessImg,shopTopImages,cityName 
            }).then(r=>{
                    let {data:res} = r;
                  
                    if(res.status == 200){
                          uni.showModal({
                               title: '提示',
                               content: '开店申请成功',
                               showCancel:false,
                               success:res=>{
                                   uni.navigateBack();
                               }
                          })
                            
                    }
            })





        }
    },

    components:{
        Certificate:UpImag,
        ShopImag:UpImag
    },

  

     onLoad(query){
         let globalData = getApp().globalData;
        
        console.log(query);
         try{
             let {province,city,district} = globalData.startPoint.addressComponent;
             this.region = [province,city,district];
             this.city =  this.region.join(' ');
            
         }catch(err){

         }

         let {salonState} =query;
         this.salonState = salonState || 'undefind';
         let {userPhone} = globalData.userInfo;
         this.phone = userPhone;
   

         postType().then(r=>{
                let {data:res} = r;
                if(res.status == 200){
                    this.category = res.data;
                }

         })
       
     },   

     onShow(){
         let globalData = getApp().globalData;
          if(Object.keys(globalData.userInfo).length == 0){
             return wx.navigateTo({
                 url:'/pages/login/index'
             })
         }
     }
  
}
</script>
<style lang="scss">
  @import './_static/scss/index.scss';
</style>